<template>
  <div class="mod-demo-echarts">
    <el-alert
      title="提示："
      type="warning"
      :closable="false">
      <div slot-scope="">
        <p class="el-alert__description">1. 此Demo只提供ECharts官方使用文档，入门部署和体验功能。具体使用请参考：http://echarts.baidu.com/index.html</p>
      </div>
    </el-alert>

    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <div id="Box" class="chart-box" style="position: relative">
            <div>
              <span>访问人数统计</span>
            </div>
            <div style="position: relative;height: 200px;width: 90%;top: 10px;margin: auto;">
              <img src="../../assets/img/all.png" class="image" style="position: relative;width: 90px;height: 90px;margin:auto;top:55px;float: left;">
              <div style="position: relative;width: 130px;height: 90px;margin:auto;top:55px;float: left;">
                <span style="position: relative;top:15px;text-align:center;display:block;font-size: 20px;color:#e6a23c;">{{charVisitData.allNum}}</span>
<!--                <span style="position: relative;top:15px;text-align:center;display:block;font-size: 20px;color:#e6a23c;"></span>-->
                <span style="position: relative;text-align:center;display:block;top:20px;font-size: 20px;">总访问量</span>
              </div>
            </div>
            <div style="position: relative;height: 200px;width: 90%;margin: auto;">
              <img src="../../assets/img/today.png" class="image" style="position: relative;width: 90px;height: 90px;margin:auto;top:55px;float: left;">
              <div style="position: relative;width: 130px;height: 90px;margin:auto;top:55px;float: left;">
                <span style="position: relative;top:15px;text-align:center;display:block;font-size: 20px;color: #3ca3e6;">{{charVisitData.todayNum}}</span>
<!--                <span style="position: relative;top:15px;text-align:center;display:block;font-size: 20px;color: #3ca3e6;"></span>-->
                <span style="position: relative;top:20px;text-align:center;display:block;font-size: 20px;">今日访问量</span>
              </div>
            </div>
<!--            <div>7863746837</div>-->
          </div>
<!--          <div id="J_chartPieBox2" class="chart-box"></div>-->
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div id="J_chartBarBox" class="chart-box">
<!--            <el-date-picker v-model="this.yearNum" type="year" placeholder="选择日期" format="yyyy" value-format="yyyy" style="" :picker-options="pickerOptions"></el-date-picker>-->

          </div>


        </el-card>

      </el-col>
      <el-col :span="8">
        <el-card>
          <div id="J_chartPieBox" class="chart-box"></div>
        </el-card>
      </el-col>
<!--        <el-col :span="12">-->
<!--          <el-card>-->
<!--            <div id="J_chartScatterBox" class="chart-box"></div>-->
<!--          </el-card>-->
<!--      </el-col>-->
      <el-col :span="24">
        <el-card>
          <el-date-picker v-model="yearNum" type="year" placeholder="选择日期" format="yyyy" value-format="yyyy" :picker-options="pickerOptions"></el-date-picker>
<!--          <el-date-picker v-model="this.yearNum" type="year" placeholder="选择日期" format="yyyy" value-format="yyyy" style=""></el-date-picker>-->
          <div id="J_chartLineBox" class="chart-box" style="position: relative">
          </div>


        </el-card>
      </el-col>
<!--      <el-col :span="24">-->
<!--        <el-card>-->
<!--          <div id="J_chartBarBox" class="chart-box"></div>-->
<!--        </el-card>-->
<!--      </el-col>-->

    </el-row>
  </div>
</template>

<script>
  import echarts from 'echarts'



  export default {
    data () {
      return {
        chartLine: null,
        chartBar: null,
        chartPie: null,
        // charVisit:null,
        charVisitData: '',
        chartLineData:[],
        chartBarData:[],
        chartPieData:[],
        yearNum:'2020',
        chartLineOption:{
          'title': {
            'text': '年度访问统计表'
          },
          'tooltip': {
            'trigger': 'axis'
          },
          'legend': {
            'data': ['访问人数']
          },
          'grid': {
            'left': '3%',
            'right': '4%',
            'bottom': '3%',
            'containLabel': true
          },
          'toolbox': {
            'feature': {
              'saveAsImage': {}
            }
          },
          'xAxis': {
            'type': 'category',
            'boundaryGap': false,
            'data': ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
          },
          'yAxis': {
            'type': 'value'
          },
          'series': [
            {
              'name': '访问人数',
              'type': 'line',
              'stack': '总量',
              // 'data':[this.chartLineData[0], 39, 20, 19, 51, 35, 10, 9, 9, 9, 30, 60]
              // 'data': [ 220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290 ]
              'data':this.chartLineData
              //   'data':getData()
              // $.getJSON(

              // 'data': [this.chartLineData[0],this.chartLineData[1],this.chartLineData[2],this.chartLineData[3],this.chartLineData[4],this.chartLineData[5],this.chartLineData[6],this.chartLineData[7],this.chartLineData[8],this.chartLineData[9],this.chartLineData[10],this.chartLineData[11]]
            },
            // {
            //   'name': '联盟广告',
            //   'type': 'line',
            //   'stack': '总量',
            //   'data': [ 220, 182, 191, 234, 290, 330, 310 ]
            // },

          ]
        },
        chartBarOption:{
          'title': {
            'text': '总数'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: []
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
              data:[],
              axisLabel: {
                interval: 0,
                formatter: function(value) {
                  return value.split("").join("\n");
                }

              }
              // axisLabel: {
              //
              //   interval:0,
              //
              //   rotate:90
              //
              // }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              // data: [320, 332, 301, 334, 390, 330, 320]
              data:[]
            },
            // {
            //   name: '邮件营销',
            //   type: 'bar',
            //   stack: '广告',
            //   data: [120, 132, 101, 134, 90, 230, 210]
            // },
            // {
            //   name: '联盟广告',
            //   type: 'bar',
            //   stack: '广告',
            //   data: [220, 182, 191, 234, 290, 330, 310]
            // },
            // {
            //   name: '视频广告',
            //   type: 'bar',
            //   stack: '广告',
            //   data: [150, 232, 201, 154, 190, 330, 410]
            // },
            // {
            //   name: '搜索引擎',
            //   type: 'bar',
            //   data: [862, 1018, 964, 1026, 1679, 1600, 1570],
            //   markLine: {
            //     lineStyle: {
            //       normal: {
            //         type: 'dashed'
            //       }
            //     },
            //     data: [
            //       [{ type: 'min' }, { type: 'max' }]
            //     ]
            //   }
            // },
            // {
            //   name: '百度',
            //   type: 'bar',
            //   barWidth: 5,
            //   stack: '搜索引擎',
            //   data: [620, 732, 701, 734, 1090, 1130, 1120]
            // },
            // {
            //   name: '谷歌',
            //   type: 'bar',
            //   stack: '搜索引擎',
            //   data: [120, 132, 101, 134, 290, 230, 220]
            // },
            // {
            //   name: '必应',
            //   type: 'bar',
            //   stack: '搜索引擎',
            //   data: [60, 72, 71, 74, 190, 130, 110]
            // },
            // {
            //   name: '其他',
            //   type: 'bar',
            //   stack: '搜索引擎',
            //   data: [62, 82, 91, 84, 109, 110, 120]
            // }
          ]
        },
        CharPieOption:{
          backgroundColor: '#2c343c',
          title: {
            text: 'Customized Pie',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#ccc'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: [
                { value: 335, name: '直接访问' },
                { value: 310, name: '邮件营销' },
                { value: 274, name: '联盟广告' },
                { value: 235, name: '视频广告' },
                { value: 400, name: '搜索引擎' }
              ].sort(function (a, b) { return a.value - b.value }),
              roseType: 'radius',
              label: {
                normal: {
                  textStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  }
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  smooth: 0.2,
                  length: 10,
                  length2: 20
                }
              },
              itemStyle: {
                normal: {
                  color: '#c23531',
                  shadowBlur: 200,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200
              }
            }
          ]
        },
        pickerOptions:{
          //disabled为函数，返回值为布尔值，
          disabledDate: (time) => {
            let minYear = new Date().getFullYear() - 30
            return time> Date.now() || time.getTime() < new Date(JSON.stringify(minYear))
          }
        }
      }
    },
    mounted () {

      this.getChartLineData()
      // this.initChartLine()
      this.getChartBarData()

      this.getChartPieData()
      // this.getChartVisitData()
      // this.initChartPie()
      // this.initChartScatter()
    },
    created () {
      this.getChartVisitData()
    },
    activated () {
      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
      if (this.chartLine) {
        this.chartLine.resize()

      }
      if (this.chartBar) {
        this.chartBar.resize()
      }
      if (this.chartPie) {
        this.chartPie.resize()
      }
      // if (this.chartVisit) {
      //   this.chartVisit.resize()
      // }
    },
    methods: {
      getChartVisitData () {
        // this.charVisit = echarts.init(document.getElementById('Box'))
        // // this.charVisit.setOption(this.CharPieOption)
        // window.addEventListener('resize', () => {
        //   this.charVisit.resize()
        // })
        console.log('进入getChartVisitData');
        this.$http({
          url: this.$http.adornUrl('/generator/syslogininfor/getVisitNum'),
          method: 'get',
          // params: this.$http.adornParams({
          //   'yearNum': this.yearNum,
          // })
        }).then(({data}) => {

          if (data && data.code === 0) {
            this.charVisitData=data.visitNum;
          } else {
            this.$message.error(data.msg)
          }

        })

      },
      getChartPieData () {
        console.log('进入getChartPieData');
            this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
            this.chartPie.setOption(this.CharPieOption)
            window.addEventListener('resize', () => {
              this.chartPie.resize()
            })
      },
      getChartBarData () {
        console.log('进入getChartBarData');
        this.$http({
          url: this.$http.adornUrl('/generator/syslogininfor/provinceNum'),
          method: 'get',
        }).then(({data}) => {

          if (data && data.code === 0) {
            this.chartBarData = data.provinceNumData
            // this.chartBarData = JSON.stringify(data.provinceNumData)
            let axisDataOfBar=[]
            let seriesDataOfBar=[]
            for (const dataKey in  this.chartBarData) {
              console.log('xaxisData:'+this.chartBarData[dataKey].xaxisData)
              axisDataOfBar.push(this.chartBarData[dataKey].xaxisData)
              console.log('seriesData:'+this.chartBarData[dataKey].seriesData)
              seriesDataOfBar.push(this.chartBarData[dataKey].seriesData)
            }
            console.log('axisDataOfBar:'+axisDataOfBar)
            console.log('seriesDataOfBar:'+seriesDataOfBar)

            console.log('$http后chartbarData:' + this.chartBarData)
            console.log('seriesData:' + this.chartBarData.seriesData)
            console.log('xaxisData:' + data.provinceNumData.xaxisData)
            // this.chartBarOption.series[0].data = this.chartbarData
            this.chartBarOption.series[0].data = seriesDataOfBar
            this.chartBarOption.xAxis[0].data=axisDataOfBar
            this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
            this.chartBar.setOption(this.chartBarOption)
            window.addEventListener('resize', () => {
              this.chartBar.resize()
            })
          } else {
            this.$message.error(data.msg)
          }

        })


      },
      getChartLineData(){
        // const jsonstr = []
        console.log('进入getEchartsData');
        this.$http({
          url: this.$http.adornUrl('/generator/syslogininfor/everyMonthData'),
          method: 'get',
          params: this.$http.adornParams({
            'yearNum': this.yearNum,
          })
        }).then(({data}) => {

          if (data && data.code === 0) {
            this.chartLineData=data.data;
            // this.chartLineData = JSON.stringify(data.data)
            // this.chartLineData = JSON.parse(data.data)
            // this.chartLineData=eval("("+data.data+")");
            console.log('$http后chartLineData:' + this.chartLineData)
            this.chartLineOption.series[0].data = this.chartLineData

            this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
            this.chartLine.setOption(this.chartLineOption)
            window.addEventListener('resize', () => {
              this.chartLine.resize()
            })
            // this.chartLine.setOption(this.option)
            // this.initChartLine();
            // this.option=option;
            // this.echarts1_option.series[0].data=data.data.list;

            //    console.log('chartLineData[0]:'+this.chartLineData[0])

            // for (let i = 0; i < this.chartLineData.length; i++) {
            //   console.log('this.chartLineData[i]:'+this.chartLineData[i])
            //   const json = {}
            //   json.name = this.chartLineData[i];
            //   json.value = this.chartLineData[i];
            //   jsonstr.push(json);
            // }
            // console.log('jsonstr:'+jsonstr)

          } else {
            this.$message.error(data.msg)
          }

        })
      },

      // 折线图
      initChartLine () {
        console.log('进入initChartLine');
        console.log('initChartLine方法chartLineData:'+this.chartLineData)
        console.log('option:'+this.option)
        // this.getEchartsData();



        // function getData () {
        //   const jsonstr1 = []
        //   console.log('getData方法chartLineData:'+this.chartLineData)
        //   for (let i = 0; i < this.chartLineData.length; i++) {
        //     console.log('this.chartLineData1[i]:'+this.chartLineData[i])
        //     const json = {}
        //     json.name = this.chartLineData[i];
        //     json.value = this.chartLineData[i];
        //     jsonstr1.push(json);
        //   }
        //   return jsonstr1;
        // }


        // option.series[0].data=this.chartLineData;
        // this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
        // this.chartLine.setOption(this.option)
        // window.addEventListener('resize', () => {
        //   this.chartLine.resize()
        // })




      },

    },

  }
</script>

<style lang="scss">
  .mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      min-height: 400px;
    }
  }
</style>
